<script setup lang="ts">
import useMainStore from '@/store/main/main'
import useUserStore from '@/store/user/user'
import { storeToRefs } from 'pinia'
import { reactive, ref } from 'vue'

const mainStore = useMainStore()
const userStore = useUserStore()

// 1.定义内部的属性
const formData = reactive<any>({
  name: '',
  realname: '',
  password: '',
  cellphone: '',
  roleId: '',
  departmentId: ''
})

// 2.获取部门及角色数据
const { roleList, departmentList } = storeToRefs(mainStore)

// 3.显示弹窗的方法
const centerDialogVisible = ref(false)
// 显示密码框
const isShowPsW = ref(true)
// 编辑用户的信息
const editData = ref<any>()
const showModel = (isNew: boolean = true, itemData?: any) => {
  // 1.显示弹窗
  centerDialogVisible.value = true

  // 2.是否显示密码框
  isShowPsW.value = isNew

  if (!isNew && itemData) {
    //当isNew等于false并且itemData有值就是编辑用户

    // 3.编辑用户
    for (const key in formData) {
      formData[key] = itemData[key]

      // 4.存储编辑用户的信息
      editData.value = itemData
    }
  } else {
    // 5.编辑用户
    for (const key in formData) {
      formData[key] = ''
    }
  }
}

// 4.确定逻辑
const handleConfirmClick = () => {
  // 关闭弹窗
  centerDialogVisible.value = false

  if (!isShowPsW.value && editData.value) {
    // 编辑用户
    const id = editData.value.id
    userStore.editUserDataAction(id, formData)
  } else {
    // 新建用户
    userStore.createUserDataAction(formData)
  }
}

// 暴露事件
defineExpose({ showModel })
</script>

<template>
  <div class="user-model">
    <el-dialog
      v-model="centerDialogVisible"
      :title="isShowPsW ? '新增用户' : '编辑用户'"
      width="30%"
      center
    >
      <el-form :model="formData" label-width="80px" size="large">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realname">
          <el-input v-model="formData.realname" placeholder="请输入真实姓名" />
        </el-form-item>
        <el-form-item v-show="isShowPsW" label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item label="手机号码" prop="cellphone">
          <el-input v-model="formData.cellphone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="选择角色" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="请选择角色" style="width: 100%">
            <template v-for="item in roleList" :key="item.id">
              <el-option :label="item.name" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>

        <el-form-item label="选择部门" prop="departmentId">
          <el-select v-model="formData.departmentId" placeholder="请选择部门" style="width: 100%">
            <template v-for="item in departmentList" :key="item.id">
              <el-option :label="item.name" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.user-model {
}
</style>
